<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thyemeaf.org/thymeleaf-extras-springsecurity4">
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>族谱</title>

    <link rel="stylesheet" th:href="@{/css/jquery.jOrgChart.css}"/>
    <script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
    <script th:src="@{/js/jquery.jOrgChart.js}"></script>
    <style>
        a {
            text-decoration: none;
            color: #fff;
            font-size: 12px;
        }
        .jOrgChart .node {
            width: 120px;
            height: 50px;
            line-height: 50px;
            border-radius: 4px;
            margin: 0 8px;
        }
    </style>

</head>
<div id='jOrgChart'></div>


<script type='text/javascript'>
    $(function(){
        //数据返回
        $.ajax({
            url: "getGenealogy",
            type: 'GET',
            dataType: 'JSON',
            success: function(result){
                var showlist = $("<ul id='org' style='display:none'></ul>");
                console.log(result.data)
                showall(result.data, showlist);
                $("#jOrgChart").append(showlist);
                $("#org").jOrgChart( {
                    chartElement : '#jOrgChart',//指定在某个dom生成jorgchart
                    dragAndDrop : false //设置是否可拖动
                });

            }
        });
    });

    function showall(menu_list, parent) {
        $.each(menu_list, function(index, val) {
            if(val.childrens!=undefined && val.childrens.length >0){

                var li = $("<li></li>");
                li.append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").append("<ul></ul>").appendTo(parent);
                //递归显示
                console.log(val.name);
                showall(val.childrens, $(li).children().eq(1));
            }else{
                $("<li></li>").append("<a href='javascript:void(0)' onclick=getOrgId("+val.id+");>"+val.name+"</a>").appendTo(parent);
                console.log(val.name);
            }
        });

    }

</script>
</body>

</html>
